<template>
    <div>
        <div id="nav">
      <div class="nav_top">
        <p class="ziti">订单信息</p>
      </div>
      <div class="nav_mid clear">
         <div class="zuo clear">
           <p class="ziti1">订单编号：</p>
           <el-input v-model="num" disabled></el-input>
         </div>
         <div class="you clear">
           <p class="ziti1">订单状态：</p>
           <el-input v-model="state" disabled></el-input>
         </div>
         <div class="zuo clear">
           <p class="ziti1">工作人员：</p>
           <el-input v-model="name" disabled></el-input>
         </div>
         <div class="you clear">
           <p class="ziti1">下单时间：</p>
           <el-input v-model="time" disabled></el-input>
         </div>
         <div class="zuo clear">
           <p class="ziti1">支付方式：</p>
           <el-input v-model="payway" disabled></el-input>
         </div>
         <div class="you clear">
           <p class="ziti1">退款时间：</p>
           <el-input v-model="refundtime" disabled></el-input>
         </div>
          <div class="zuo clear">
           <p class="ziti1">订单总价：</p>
           <el-input v-model="allprice" disabled></el-input>
         </div>
      </div>
      </div>
      <div class="nav_bottom clear">
      <p class="ziti2">明细数据</p>
      </div>
      <div class="banner">
      <el-table :data="tableData"
                  stripe
                  style="width: 100%"
                  :cell-style="{border:'1px solid #DCDCDC'}"
                  :header-cell-style="{background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}">
      <el-table-column
        prop="order_num"
        label="序号"
        width="215"
        align='center'
      ></el-table-column>
      <el-table-column
        width="215"
        prop="order_name"
        label="菜品名称"
        align='center'
      ></el-table-column>
      <el-table-column
        width="215"
        prop="menu_num"
        label="菜品编号"
        align='center'
      ></el-table-column>
      <el-table-column
        width="215"
        prop="order_time"
        label="下单时间"
        align='center'
      ></el-table-column>
      <el-table-column
        width="215"
        prop="order_allprice"
        label="总价"
        align='center'
      ></el-table-column>
      <el-table-column
        width="215"
        prop="customer_name"
        label="用户名"
        align='center'
      ></el-table-column>
    </el-table>
    <div class="block">
     <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" 
        :page-sizes="[5,10,15,20,25,30]" :page-size="count" layout="total,sizes,prev, pager, next, jumper" :total="totalData.length">
        </el-pagination>
    </div>
    </div>
    
    
    </div>
</template>
<script>
export default {
  data() {
    return {
      num:'',
      state:'',
      name:'',
      time:'',
      payway:'',
      refundtime:'',
      allprice:'',
      totalData: [],
      page: 1,
      count: 5,
      inventoryid:null,
      inventorycusid:null,
    };
  },
  methods:{
     
     getinventory: function () {
            this.$axios({
                url: '/api/inventory/getinventory',
                data:{
                  id: this.inventoryid
                },
                method:'post'
            }).then((res) => {
                this.totalData=res.data.data
                this.totalData.forEach(v=>{      
                this.num=v.order_num
                this.state=v.order_state
                this.time = v.order_time
                this.name=v.user_name
                this.payway=v.pay_way
                this.refundtime=v.order_refund_time
                this.allprice=v.order_allprice
                return v
            })  
                this.allprice='￥'+this.allprice
        })
     },
    getinventoryuser: function () {
            this.$axios({
                url: '/api/inventory/getinventoryuser',
                data:{
                  customer_id:this.inventorycusid,
                },
                method:'post'
            }).then((res) => {
                this.totalData=res.data.data
                this.page=1
            })  
        },
        // 每页多少条数据
    handleSizeChange(count) {
        this.count=count
    },
    // 分页
    handlePageChange(page) {
        this.page=page
    },
  },
  
  created: function () {
        this.inventoryid=this.$route.params.id;
        this.inventorycusid=this.$route.params.cusid;
        this.getinventory();
        this.getinventoryuser();  
    },
    computed:{
        tableData: function () {
                return this.totalData.slice((this.page - 1) * this.count, this.page * this.count);
            }
     },
    }


</script>
<style scoped>
.clear::after {
  content: "";
  display: block;
  clear: both;
}
#nav {
  border: 1px solid rgba(242, 242, 242);
}
.nav_top {
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
}
.ziti,.ziti1{
  margin: 0 0 0 30px;
}
.nav_mid {
  padding: 0 0 30px 30px;
}
.ziti1{
    margin-top:7.6px;
    float: left;
}
.ziti2{
   margin: 0 0 0 30px;
}
.el-input{
    float:left;
    margin-left:20px;
    width:300px;
}
.you{
    margin-top:20px;
    margin-left: 50px;
    float: left;
}
.zuo{
    margin-top: 20px;
    float: left;
}
.nav_bottom {
  border: 1px solid rgba(242, 242, 242);
  height: 50px;
  background-color: rgba(242, 242, 242);
  line-height: 50px;
  margin-bottom:20px;
}
.block {
  text-align: center;
  margin-top: 20px;
}
</style>